<template>
	<view>
		<view class="wrapper">
			<image class="header-img" :src="headImgUrl"></image>
			<view class="user-info-wrapper">
				<view class="user-info user-info-text">用户名：{{nickName}}</view>
				<view class="user-info user-info-text">性别：{{sex}}</view>
				<view class="user-info user-info-text">地区：{{country}} {{province}} {{city}}</view>
				<view class="user-info user-info-text">手机号：{{mobile}}</view>
			</view>
		</view>
		<button class="auth-button" open-type="getUserInfo" @getuserinfo="wxGetUserInfo">获取用户信息</button>
		<button class="auth-button" open-type="getPhoneNumber" @getphonenumber="getphonenumber">获取手机号</button>
	</view>
</template>

<script>
	import WXBizDataCrypt from '@/utils/WXBizDataCrypt.js'	//微信官方提供解码js
	export default {
		data() {
			return {
				nickName: '',
				sex: '',
				country: '',
				province: '',
				city: '',
				headImgUrl: '',
				mobile: ''
			}
		},
		onLoad() {
			let that = this;
			wx.getSetting({
				success (res) {
					console.log('wx.getSetting:',res);
					if(res.authSetting['scope.userInfo']) {
						that.wxGetUserInfo();
					}
				}
			})
		},
		methods: {
			// 获取用户信息
			wxGetUserInfo() {
				let that = this;
				uni.showLoading({
					title: '加载中'
				});
				// 获取登录临时凭证code
				uni.login({
					provider: 'weixin',
					success: function(res) {
						console.log('wx.login:',res);
						// 使用code换取openId，应从后端接口获取
						uni.request({
							url: 'https://api.weixin.qq.com/sns/jscode2session',
							method: 'GET',
							data: {
								appid: 'wx40d66f771c89c281',
								secret: '5629a1b18da3ddc13fe2283e71678c87',
								js_code: res.code,
								// js_code: '063biYZv3GK9YV2f5a3w31hKV02biYZq',
								grant_type: 'authorization_code'
							},
							success:function(req) {
								console.log('jscode2session:',req);
								// 使用openId换取用户信息
								uni.getUserInfo({
									provider: 'weixin',
									withCredentials: true,
									lang: 'zh_CN',
									success: function(obj) {
										let pc = new WXBizDataCrypt('wx40d66f771c89c281',req.data.session_key);
										let data = pc.decryptData(obj.encryptedData , obj.iv);
										console.log('getUserInfo:',data);
										that.nickName = obj.userInfo.nickName;
										switch(obj.userInfo.gender) {
											case 0:
												that.sex = '未知';
												break;
											case 1:
												that.sex = '男';
												break;
											case 2:
												that.sex = '女';
												break;
											default:
												that.sex = '未知';
												break;
										};
										that.country = obj.userInfo.country;
										that.province = obj.userInfo.province;
										that.city = obj.userInfo.city;
										that.headImgUrl = obj.userInfo.avatarUrl;
									},
									fail: function(obj) {
										console.log(obj);
									},
									complete() {
										uni.hideLoading();
									}
								})
							}
						})
					},
					fail: function(res) {
						console.log(res);
					}
				})
			},
			
			// 授权获取用户手机号
			getphonenumber(e) {
				let that = this;
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){	//用户拒绝授权
					console.log(e.detail.errMsg);
				}else if(e.detail.errMsg=="getPhoneNumber:ok"){			//用户允许授权，并成功获取手机号
					// 获取登录临时凭证code
					uni.login({
						provider: 'weixin',
						success: function(res) {
							console.log('wx.login:',res);
							// 使用code换取sessionKey，应从后端接口获取
							uni.request({
								url: 'https://api.weixin.qq.com/sns/jscode2session',
								method: 'GET',
								data: {
									appid: 'wx40d66f771c89c281',
									secret: '5629a1b18da3ddc13fe2283e71678c87',
									js_code: res.code,
									grant_type: 'authorization_code'
								},
								success:function(req) {
									console.log('jscode2session:',req);
									let pc = new WXBizDataCrypt('wx40d66f771c89c281',req.data.session_key);
									let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);  
									console.log('手机号解码结果：',data);
									//存储手机号
									that.mobile = '+' + data.countryCode + '-' + data.phoneNumber;
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.wrapper {
		width: 100;
		text-align: center;
		background-color: #007AFF;
	}
	
	.header-img {
		width: 200rpx;
		height: 200rpx;
		margin: 58rpx auto 0 auto;
		border: solid 2px #FFFFFF;
		border-radius: 50%;
	}
	
	.user-info-wrapper {
		margin-top: 42rpx;
		padding-bottom: 20rpx;
	}
	
	.user-info {
		margin-bottom: 16rpx;
	}
	
	.user-info-text {
		color: #FFFFFF;
		font-size: 32rpx;
	}
	
	.auth-button {
		width: 80%;
		margin: 58rpx auto 0 auto;
		background-color: #007AFF;
		color: #F1F1F1;
	}
</style>
